<template>
  <div class="group" :class="currentCls">
    <div v-if="isImg === 1">
      <el-upload
        v-if="isShow"
        ref="fileUpload"
        class="upload-demo"
        action
        :http-request="handleUploadForm"
        :headers="Headers"
        :show-file-list="false"
        multiple
      >
        <div class="l-upload-btn">
          <i v-if="!progressFlag" :class="initExplodedIcon" class="el-icon l-upload" />
          <!-- 进度条【start】 -->
          <el-progress v-else class="upload-progress" text-inside :stroke-width="12" :percentage="loadProgress" :status="status"></el-progress>
          <!-- 进度条【end】 -->
        </div>
      </el-upload>

      <div v-if="!isShow" class="files">
        <slot>
          <i :class="explodedIcon" class="el-icon l-files" />
        </slot>
        <div v-if="isHoverExplodedIcon" class="files-upload-cover">
          <i v-for="(item, index) in hoverExplodedIcon" :key="index" @click.stop="$emit(`clickHandler${index}`)" :class="[item, `l-del-${index}`]" class="el-icon l-del" />
        </div>
      </div>
    </div>

    <div v-else-if="isImg === 0">
      <div v-if="isShow" class="l-upload-btn" @click="$emit('onClick')">
        <i :class="initExplodedIcon" class="el-icon l-upload" />
      </div>
      <div v-else class="files" @click.stop="$emit(`files`)">
        <slot>
          <i :class="explodedIcon" class="el-icon l-files" />
        </slot>
        <div v-if="isHoverExplodedIcon" :class="{on: hoverExplodedIcon.length === 0}" class="files-upload-cover">
          <i v-for="(item, index) in hoverExplodedIcon" :key="index" @click.stop="$emit(`clickHandler${index}`)" :class="[item, `l-del-${index}`]" class="el-icon l-del" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { fileImageApi } from '@/api/oss'
export default {
  name: 'Index',
  props: {
    // 0 => 图片,1 => 文件
    isImg: {
      type: Number,
      default: 0
    },
    // 是否展示
    isShow: {
      type: Boolean,
      default: true
    },
    // 没有值时展示图
    initExplodedIcon: {
      type: String,
      default: 'el-icon-upload'
    },
    // 展示图
    explodedIcon: {
      type: String,
      default: 'el-icon-files'
    },
    // 悬浮展示图
    hoverExplodedIcon: {
      type: Array,
      default() {
        return ['el-icon-delete']
      }
    },
    // 是否需要悬浮框
    isHoverExplodedIcon: {
      type: Boolean,
      default: true
    },
    // 自定义类(根据需要修改)
    currentCls: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      Headers: { 'Content-Type': 'multipart/form-data' },
      // 进度条的值
      loadProgress: 0,
      // 进度条
      progressFlag: false,
      status: ""
    }
  },
  methods: {
    /**
     * 文件上传
     * @param param
     */
    handleUploadForm(param) {
      const formData = new FormData()
      formData.append('file', param.file)
      formData.append('type', 1)
      this.$set(this, "progressFlag", true);
      this.$set(this, "loadProgress", 0);
      this.$set(this, "status", "success");
      const uploadEvent = (progressEvent) => {
        this.loadProgress = Number(((progressEvent.loaded / progressEvent.total) * 100).toFixed(2));
      };
      console.log("formData:",formData,"uploadEvent",uploadEvent)

      fileImageApi(formData, uploadEvent,guid).then((res) => {
        this.$message({ message: '上传成功', type: 'success' })
        this.$set(this, "status", "success");
        setTimeout(() => {
          this.$set(this, "progressFlag", false);
          this.$emit('fileUploadGroup', { path: res });
        }, 1000);
      }).catch((err) => {
        this.$message({ message: err || '上传失败，请重新上传', type: 'warning' })
        this.$set(this, "status", "exception");
        setTimeout(() => {
          this.$set(this, "progressFlag", false);
        }, 1000);
      });
    }
  }
}
</script>

<style lang="scss" scoped>
  .group {
    .upload-progress {
      padding-left: 3px;
      padding-right: 3px;
      width: 100%;
      ::v-deep .el-progress-bar__inner {
        text-align: center;
      }
      ::v-deep .el-progress-bar__innerText {
        vertical-align: top;
      }
    }
    .l-upload-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 58px;
      height: 58px;
      text-align: center;
      line-height: 58px;
      border: 1px dashed #c0ccda;
      cursor: pointer;
      border-radius: 4px;
      overflow: hidden;
      background: #fff;
      position: relative;
      margin-right: 4px;
      box-sizing: border-box;
      .l-upload {
        font-size: 20px;
      }
      &.l-upload-btn:hover {
        box-shadow: 2px 2px 5px rgb(0 0 0 / 10%);
      }
    }
    .files {
      display: inline-block;
      width: 58px;
      height: 58px;
      text-align: center;
      line-height: 58px;
      border: 1px solid #c0ccda;
      border-radius: 4px;
      overflow: hidden;
      background: #fff;
      position: relative;
      box-shadow: 2px 2px 5px rgb(0 0 0 / 10%);
      margin-right: 4px;
      box-sizing: border-box;
      .l-files {
        font-size: 40px;
        vertical-align: middle;
      }
      .files-upload-cover {
        opacity: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, .6);
        transition: opacity .3s;
        .l-del {
          color: #fff;
          font-size: 20px;
          cursor: pointer;
          margin: 0 2px;
          vertical-align: middle;
        }
        &.on {
          display: none !important;
        }
      }
      &.files:hover {
        .files-upload-cover {
          cursor: pointer;
          opacity: 1;
        }
      }
    }
  }
</style>
